﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>复选框表格 - Xui Demo</title>
	<!-- demo -->
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../demo_data.js"></script>
	
	<!-- xui -->
	<link rel="stylesheet" type="text/css" href="../../xui.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../xui.js"></script>
	
	<!-- xtable -->
	<script type="text/javascript">
		$(function(){
			var xtable = $("#goods_xtable").xtable({
				width:700,			//宽度默认 100%
				xdata:$xdata		//静态数据
				//url:"$xdata"		//后台返回数据格式参考 $xdata
			});
			
			$("#btn_get_sel").click(function(){
				alert(xtable.getSelected());
			});
		})
	</script>
</head>
<body>
	<h2>复选框表格</h2>
	<button type="button" class="xbtn" id="btn_get_sel">获取选中行</button><br/><br/>
	<div class="xtable" id="goods_xtable">
		<table class="xhead">
			<tr>
				<th class="ck"><input type="checkbox" class="xcheckbox"/></th>
				<th>商品</th>
				<th width="100px">商品类型</th>
				<th width="80px">价格 </th>
				<th width="80px">销量</th>
			</tr>
		</table>
		<div class="xbody">
			<table>
				<tbody class="xtemplate">
					<tr>
						<td class="ck"><input type="checkbox" data-xv="{index}"/></td>
						<td>{name}</td>
						<td>{typeName}</td>
						<td class="tr">{price}</td>
						<td class="tc">{sales}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>